<template>
  <div class="app-container">
    <center>
      <el-select v-model="result" placeholder="选择的人格查看在本班占比" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="success" @click="state.find()">查看</el-button>
      <br /><br /><br /><br /><br /><br /><br />
      <div class="demo-progress">
        <el-progress type="circle" :percentage="percentage" />
      </div>
    </center>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import { request } from "@/utils/service"
import { useUserStore } from "@/store/modules/user"
import router from "@/router"
const result = ref("")
const percentage = ref<number>(0)
const username = useUserStore().username
if (username == "admin") {
  router.push({ path: "/" })
}
const state = reactive({
  find: () => {
    request({
      url: "/students/" + username,
      method: "post",
      data: { result: result.value }
    }).then((resp) => {
      percentage.value = resp.data.per
    })
  }
})
const options = [
  {
    value: "ISTJ",
    label: "ISTJ"
  },
  {
    value: "ISTJ",
    label: "ISTJ"
  },
  {
    value: "INFJ",
    label: "INFJ"
  },
  {
    value: "INTJ",
    label: "INTJ"
  },
  {
    value: "ISTP",
    label: "ISTP"
  },
  {
    value: "ISFP",
    label: "ISFP"
  },
  {
    value: "INFP",
    label: "INFP"
  },
  {
    value: "INTP",
    label: "INTP"
  },
  {
    value: "ESTP",
    label: "ESTP"
  },
  {
    value: "ESFP",
    label: "ESFP"
  },
  {
    value: "ENFP",
    label: "ENFP"
  },
  {
    value: "ENTP",
    label: "ENTP"
  },
  {
    value: "ESTJ",
    label: "ESTJ"
  },
  {
    value: "ESFJ",
    label: "ESFJ"
  },
  {
    value: "ENFJ",
    label: "ENFJ"
  },
  {
    value: "ENTJ",
    label: "ENTJ"
  }
]
</script>

<style scoped>
/* .demo-progress .el-progress--line {
  margin-bottom: 30px;
  width: 500px;
  height: 500px;
} */

.demo-progress {
  width: 800px;
  height: 800px;
  size: 100px;
}
/* .demo-progress .el-progress--circle {
  margin-right: 30px;
  width: 800px;
  height: 300px;
} */
</style>
